<template>
    <!-- 消费记录 -->
    <view class="mine-box">
        <view class="info">
            <view class="user">
                <image class="touxiang" src="../../static/defautl/banner01.png" mode=""></image>
                一个名字
            </view>
            <view class="consume">
                <view>总消费</view>
                <view class="money">49,123.11</view>
            </view>
        </view>
        
        <view class="list">
            <view>
                <view>运单号：3874123581</view>
                <view class="time">03-09  11:15</view>
            </view>
            <view class="money">¥35.00</view>
        </view>
        <view class="list">
            <view>
                <view>运单号：3874123581</view>
                <view class="time">03-09  11:15</view>
            </view>
            <view class="money">¥35.00</view>
        </view>
        <view class="list">
            <view>
                <view>运单号：3874123581</view>
                <view class="time">03-09  11:15</view>
            </view>
            <view class="money">¥35.00</view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {}
    },
    watch:{},
    onLoad() {
        
    },
    methods: {}
}
</script>

<style scoped lang="less">
.list{
    margin: 25rpx 25rpx 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    color: #333;
    font-size: 32rpx;
    
    .time{
        color: #aab2b7;
        font-size: 28rpx;
        margin-top: 10rpx;
    }
    .money{
        color: #4598ff;
        font-size: 32rpx;
    }
}
.info{
    width: 700rpx;
    height: 320rpx;
    margin: 25rpx;
    background: url(../../static/images/bg.png) no-repeat 0 0;
    background-size: 700rpx 320rpx;
    padding: 40rpx 0 0 40rpx;
    color: #fff;
    
    .user{
        display: flex;
        align-items: center;
        font-size: 32rpx;
        .touxiang{
            margin-right: 20rpx;
            height: 60rpx;
            width: 60rpx;
            border-radius: 50%;
        }
    }
    .consume{
        margin-top: 50rpx;
        font-size: 28rpx;
        .money{
            font-size: 60rpx;
        }
    }
}
</style>
